<template>
	<view class="e-skeleton-item">
		<SkeletonList v-if="props.variant === 'list'" :customStyle="props.customStyle" :animate="skeletonContext.props.animate" :config="skeletonContext.props.config!.list" />
		<SkeletonMenu v-else-if="props.variant === 'menu'" :customStyle="props.customStyle" :animate="skeletonContext.props.animate" :config="skeletonContext.props.config!.menu" />
		<SkeletonNavbar v-else-if="props.variant === 'navbar'" :customStyle="props.customStyle" :animate="skeletonContext.props.animate" :safeAreaInsetTop="skeletonContext.props.safeAreaInsetTop"  :config="skeletonContext.props.config!.navbar" />
		<SkeletonSwiper v-else-if="props.variant === 'swiper'" :customStyle="props.customStyle" :animate="skeletonContext.props.animate" :config="skeletonContext.props.config!.swiper" />
		<SkeletonTabbar v-else-if="props.variant === 'tabbar'" :customStyle="props.customStyle" :animate="skeletonContext.props.animate" :config="skeletonContext.props.config!.tabbar" />
		<SkeletonWaterfall v-else-if="props.variant === 'waterfall'" :customStyle="props.customStyle" :animate="skeletonContext.props.animate" :config="skeletonContext.props.config!.waterfall" />
		<SkeletonBlock v-else-if="props.variant === 'block'" :customStyle="props.customStyle"  >
			<slot></slot>
		</SkeletonBlock>
	</view>
</template>

<script lang="ts">
	import {defineComponent} from 'vue'
	import mpMixin from "../../libs/mixin/mpMixin";
	/**
	 * skeleton-item 骨架屏item
	 * @description 骨架屏item
	 * @tutorial https://www.uviewui.com/components/skeleton-item.html
	 * @property {String}			variant				当前渲染 skeleton 类型
	 * @example <e-skeleton-item :show="show"><text>出淤泥而不染，濯清涟而不妖</text></e-skeleton-item>
	 */
	export default defineComponent({
		name: "e-skeleton-item",
		mixins: [mpMixin],
	});
</script>

<script lang="ts" setup>
	import {
		toRefs,
		inject
	} from "vue";
	import {
		useDefaultProps
	} from '../../libs/hooks'
	import {
		throwError
	} from '../../libs/utils/_utils'
	import {
		skeletonItemProps
	} from "./props";
	import componentsProps, {
		type DefaultProps
	} from "../../libs/config/componentsProps";
	import {
		skeletonContextKey
	} from '../../libs/tokens'
	
	import SkeletonList from './list.vue'
	import SkeletonMenu from './menu.vue'
	import SkeletonNavbar from './navbar.vue'
	import SkeletonSwiper from './swiper.vue'
	import SkeletonTabbar from './tabbar.vue'
	import SkeletonWaterfall from './waterfall.vue'
	import SkeletonBlock from './block.vue'
	
	
	const {
		skeletonItem: skeletonDefaultProps
	} = toRefs(componentsProps);
	
	const _props = defineProps(skeletonItemProps)
	
	const props = useDefaultProps < DefaultProps['skeletonItem'] > (_props, skeletonDefaultProps);
	
	const skeletonContext = inject(skeletonContextKey)
	
	if (!skeletonContext) throwError('ESkeletonItem', 'e-skeleton-item需要结合e-skeleton组件使用')
</script>

<style lang="scss" scoped>
	@import "../../libs/theme/skeleton-item.scss";
</style>
